<!DOCTYPE html>
<html>
  <head>
    <title>创世纪元</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">


  <!-- <link rel="stylesheet" type="text/css" href="clock/css/normalize.css" /> -->
  <!-- <link rel="stylesheet" type="text/css" href="clock/css/htmleaf-demo.css"> -->

<link rel="stylesheet" href="lib/weui.min.css">
<link rel="stylesheet" href="jquery-weui.min.css">
<link rel="stylesheet" href="demos.css">
<style type="text/css">
  .searchbar-result {
      display: none;
      margin-top: 0;
      font-size: 14px;
  }
</style>
<style type="text/css">
  
    .node {
    cursor: pointer;
  }

  .overlay{
      background-color:#EEE;
  }
   
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
   
  .node text {
    font-size:10px; 
    font-family:sans-serif;
  }
   
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }

  .templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
  }

  .ghostCircle.show{
      display:block;
  }

  .ghostCircle, .activeDrag .ghostCircle{
       display: none;
  }

</style>
  </head>
  <body ontouchstart>
    <div class="weui-tab">
      <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active searchGRXX">
            <div class="weui-search-bar searchBar" id="">
              <div class="weui-search-bar__box">
                  <i class="weui-icon-search"></i>
                  <input type="text" class="weui-search-bar__input searchInput" id="" placeholder="请输入物品名称" required />
                  <a href="javascript:" class="weui-icon-clear searchClear" id=""></a>
              </div>
              <label class="weui-search-bar__label searchText" id="">
                  <i class="weui-icon-search"></i>
                  <span>检索物品</span>
              </label>
              <a href="javascript:" class="weui-search-bar__cancel-btn searchCancel" id="">取消</a>
            </div>
            <div class="weui-cells searchbar-result searchResult" id="">
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd weui-cell_primary">
                        <p>信息</p>
                    </div>
                </div>
            </div>
          <div class="disp" class="weui_cells weui_cells_form">
            <div id="tree-container"></div>
          </div>
        </div>
        <div id="tab2" class="weui-tab__bd-item">
          <div class="weui_cells weui_cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"></div>
                <div class="weui-cell__bd">
                </div>
            </div>
          </div>
          <div class="disp" class="weui_cells weui_cells_form">
          </div>
        </div>
      </div>

      <div class="weui-tabbar">
        <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
          <!-- <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> -->
          <div class="weui-tabbar__icon">
            <img src="images/icon_nav_button.png" alt="">
          </div>
          <p class="weui-tabbar__label">物品</p>
        </a>
        <a href="#tab2" class="weui-tabbar__item">
          <div class="weui-tabbar__icon">
            <img src="images/icon_nav_article.png" alt="">
          </div>
          <p class="weui-tabbar__label">其他</p>
        </a>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/d3/3.2.7/d3.min.js"></script>
    <script src="lib/jquery-2.1.4.js"></script>
    <script src="lib/fastclick.js"></script>
    <script src="js/jquery-weui.js"></script>
    <!-- <script src="items.js"></script> -->
    <script src="jquery.linq.js"></script>
    <script src="Convert_Pinyin.js" type="text/javascript"></script>
    <script src="dndTree.js" type="text/javascript"></script>
    <script type="text/javascript">
        function constructGRXX(list,filter){
            if(filter && filter.trim()!==''){
                //排序处理
                list = jQuery.Enumerable.From(list)
                .Where(function (x) {
                    var reg='/^'+filter.trim()+'.*$/.test("'+x.name+'")';
                    var reg1='/^'+filter.trim().toLowerCase()+'.*$/.test("'+x.py.toLowerCase()+'")';
                    var reg2='/^'+filter.trim()+'.*$/.test("'+x.id+'")';
                    return eval(reg) || eval(reg1) || eval(reg2);
                })
                //.OrderByDescending(function (x) { return x.JE })
                .Select(function (x) { return x })
                .ToArray();
            }
            else{
            }
            var ksHtml='';
            $('.searchGRXX .searchResult').empty();
            $.each(list,function(i,c){
                //初始化人员参数
                ksHtml+='\
                    <div class="weui-cell weui-cell_access">\
                        <div class="weui-cell__bd weui-cell_primary">\
                            <p data-id="'+c.name+'">'+c.name+'</p>\
                        </div>\
                    </div>';

            });
            $('.searchGRXX .searchResult').append(ksHtml);
        }
    function getchild(node,number){
        if(!node.children){
            return {
                "name": node.name+number,
                "number": number
            };
        }
        else{
            var ret={
                "name": node.name+number,
                "number": number,
                "children": []
            };
            $.each(node.children,function(i,c){
                var tmpItem=jQuery.Enumerable.From(items).Where(function (x) { return x.name == c.name }).FirstOrDefault();
                if(tmpItem){
                    ret.children.push(getchild(tmpItem,c.number*number));
                }
            });
            return ret;
        }
    }
        function contructTree(value){
          $('#tree-container').empty();
          var node=jQuery.Enumerable.From(items).Where(function (x) { return x.name == value }).FirstOrDefault();
          if(node){
              node = getchild(node,1);
              setTimeout(function(){
                  createTree(node);
              },1000);
          }
          //createTree
        }
        $(function(){
          $.ajax({
              url: "d_item.json?"+(new Date()).getTime(),
              method: 'GET',
              async: false
          }).success(function(result){
              window.d_item=result;
          });
          //加载数据
          $.get("d_forge.json?"+(new Date()).getTime(),function(data,status){
              window.items=[];
              //加载列表
              // $.each(items,function(i,c){
              //   c.py=pinyin.getCamelChars(c.name);
              // });
              //构造锻造列表
              for(key in data){
                data[key].py=pinyin.getCamelChars(data[key].name);
                data[key].children=[];
                var ids=data[key]["materialsId"].split('_');
                $.each(ids,function(i,c){
                  var id=c.split('|')[0];
                  var num=c.split('|')[1];
                  var name=d_item[id].name;
                  data[key].children.push({id:id,name:name,number:num});
                });
                items.push(data[key]);
              }
              //合并基本物品
              for(key in d_item){
                if(!data[key]){
                  d_item[key].py=pinyin.getCamelChars(d_item[key].name);
                  items.push(d_item[key]);
                }
              }
              var ksArray=jQuery.Enumerable.From(items).OrderBy("c=>c.type").ThenBy("c=>c.id").ToArray();

              var $searchBar = $('.searchGRXX .searchBar'),
                  $searchResult = $('.searchGRXX .searchResult'),
                  $searchText = $('.searchGRXX .searchText'),
                  $searchInput = $('.searchGRXX .searchInput'),
                  $searchClear = $('.searchGRXX .searchClear'),
                  $searchCancel = $('.searchGRXX .searchCancel');

              function hideSearchResult(){
                  $searchResult.hide();
                  $searchInput.val('');
              }
              function cancelSearch(){
                  //hideSearchResult();
                  $searchInput.val('');
                  $searchBar.removeClass('weui-search-bar_focusing');
                  $searchText.show();
              }

              $searchText.on('click', function(){
                  $searchBar.addClass('weui-search-bar_focusing');
                  $searchInput.focus();
              });
              $searchInput
                  .on('blur', function () {
                      //if(!this.value.length) cancelSearch();
                      setTimeout(function(){
                          $searchResult.hide();
                      },100);
                  })
                  .on('input', function(){
                      //if(this.value.length) {
                      //    $searchResult.show();
                      //} else {
                      //    $searchResult.hide();
                      //}
                      //console.log($('.searchGRXX .searchInput').val());
                      constructGRXX(ksArray,$('.searchGRXX .searchInput').val());
                      $searchResult.show();
                  }).on('focus',function(){
                      constructGRXX(ksArray,$('.searchGRXX .searchInput').val());
                      $searchResult.show();
                  })
              ;
              $searchClear.on('click', function(){
                  //hideSearchResult();
                  $searchInput.val('');
                  $searchInput.focus();
              });
              $searchCancel.on('click', function(){
                  cancelSearch();
                  $searchInput.blur();
              });
              $searchResult.on('click','.weui-cell_access',function(){
                  //console.log($(this).find('p').data('id'));
                  $searchInput.data('personid',$(this).find('p').data('id'));
                  $searchInput.val($(this).find('p').text());
                  $searchResult.hide();
                  
                  //$.showLoading();
                  //var param={};
                  //param.id=$('.searchGRXX .searchInput').data('personid');
                  //changeMonthGR();//触发查询
                  contructTree($('.searchGRXX .searchInput').val());
              });
              $searchInput.keydown(function(event){
                  if(event.keyCode ==13){
                      if($searchResult.find('p').length>0){
                          $searchInput.val($searchResult.find('p').eq(0).text());
                          $searchInput.data('personid',$searchResult.find('p').eq(0).data('id'));
                          //changeMonthGR();//触发查询
                          contructTree($('.searchGRXX .searchInput').val());
                      }
                  }
              });
          });
        });
    </script>
  </body>
</html>